<template>
  <div class="shdz">
    <div class="shdz-y">
      <span class="skung">我的收货地址</span>
    </div>
    <div class="lszq">
      <el-button type="text" class="kilo" @click="dialogVisible = true"
        >新增收货地址</el-button
      >
      <span class="klok">
        您已创建<span class="slka">0</span>个收货地址，最多可创建<span
          class="slka"
          >5</span
        >个
      </span>
    </div>
    <div class="comm_bd" v-for="item in a" :key="item.id">
      <div class="com-addrtit">
        <div class="clearfix">
          <span class="fl" style="max-width: 600px; width: auto"
            >{{ item.consignee }} {{ item.address }}</span
          >
          <a href="#" class="fr" style="float: right" @click="Delete(item.id)"
            >X</a
          >
        </div>
        <div class="choose_box">
          <div class="mb5">
            <p>收货人：</p>
            <span>{{ item.consignee }}</span>
          </div>
          <div class="mb5">
            <p>所在地区：</p>
            <span>{{ item.address }}</span>
          </div>
          <div class="mb5">
            <p>地址：</p>
            <span>{{ item.region }}</span>
          </div>
          <div class="mb5">
            <p>手机：</p>
            <span>{{ item.phone }}</span>
          </div>
          <div class="mb5">
            <p>固定电话：</p>
            <span>{{ item.Telephone }}</span>
          </div>
          <div class="mb5">
            <p>邮编：</p>
            <span>{{ item.code }}</span>
          </div>
          <div class="clearfix1">
            <button @click="IsDefault(item.id)" v-if="item.isDefault !== '1' ? true : false">设为默认</button><button @click="Update(item)">编辑</button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="新增收货地址"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
    >
      <div class="poiu">
        <table class="mnkul">
          <tbody>
            <tr class="c">
              <td class="lbl">*收件人</td>
              <td colspan="3">
                <input
                  class="fl wth400"
                  value=""
                  v-model="b.consignee"
                  placeholder="收件人"
                  verifyerrmsg="收件人为必填项, 且最多20个字符"
                />
              </td>
            </tr>
            <tr class="c">
              <td class="lbl">*所在地区</td>
              <td style="width: 110px">
                <select
                  type="text"
                  id="tmpl_popup_pay_address_region_1"
                  name="sProvince"
                  style="width: 100px"
                  v-model="b.address"
                >
                  <option v-for="item in c" :value="item.id" :key="item.id">{{item.name}}</option>
                </select>
              </td>
            </tr>
            <tr class="c">
              <td class="lbl">*收件人地址</td>
              <td colspan="3">
                <input
                  class="fl wth400"
                  value=""
                  placeholder="收件人地址"
                  name="detail"
                  v-model="b.region"
                  verifyreg="^.{1,100}$"
                  verifyerrmsg="收件人地址为必填项, 且最多100个字符"
                />
              </td>
            </tr>
            <tr class="c">
              <td class="lbl">*手机号码</td>
              <td colspan="3">
                <input
                  class="fl wth140"
                  value=""
                  placeholder="手机号码"
                  name="mobile"
                  v-model="b.phone"
                  verifyreg="^\d{11}$"
                  verifyerrmsg="手机号码为必填项, 只能输入11位数字"
                />
              </td>
            </tr>
            <tr class="c">
              <td class="lbl">固定电话</td>
              <td colspan="3">
                <input
                  class="fl wth140"
                  value=""
                  placeholder="固定电话"
                  name="tel"
                  v-model="b.Telephone"
                  verifyreg="^[\d\-]{0,12}$"
                  verifyerrmsg="固定电话只能输入数字和-字符, 最多12位"
                />
              </td>
            </tr>
            <tr class="c">
              <td class="lbl">邮编</td>
              <td colspan="3">
                <input
                  class="fl wth140"
                  value=""
                  placeholder="邮政编码"
                  name="zip"
                  v-model="b.code"
                  verifyreg="^\B|\d{6}$"
                  verifyerrmsg="邮编只能输入6位数字"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Add"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryConsignee, queryDelete, queryAdd, queryUpdate, queryIsDefault } from '@/api/goods'
export default {
  name: 'Rwu7',
  data () {
    return {
      dialogVisible: false,
      a: [],
      b: {
        consignee: ''
      },
      c: [
        { id: '10000', name: '请选择' },
        { id: '110000', name: '北京' },
        { id: '120000', name: '河北' },
        { id: '130000', name: '天津' },
        { id: '140000', name: '山西' },
        { id: '150000', name: '内蒙古' },
        { id: '160000', name: '辽宁' },
        { id: '170000', name: '吉林' },
        { id: '180000', name: '黑龙江' },
        { id: '190000', name: '上海' },
        { id: '200000', name: '江苏' },
        { id: '210000', name: '浙江' },
        { id: '220000', name: '安徽' },
        { id: '230000', name: '福建' },
        { id: '240000', name: '江西' },
        { id: '250000', name: '山东' },
        { id: '260000', name: '河南' },
        { id: '270000', name: '湖北' },
        { id: '280000', name: '湖南' },
        { id: '440000', name: '广东' },
        { id: '450000', name: '广西' }
      ],
      lzyId: ''
    }
  },
  mounted () {
    this.Consignee()
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    async Consignee () {
      const res = await queryConsignee()
      this.a = res
      console.log(this.a)
    },
    async Delete (id) {
      await queryDelete(id)
      this.Consignee()
    },
    async Add () {
      this.dialogVisible = false
      if (this.a.length >= 5) return
      if (!this.b.id) {
        console.log(1)
        await queryAdd(this.b)
      } else {
        await queryUpdate(this.lzyId, this.b)
      }
      this.b = {}
      this.Consignee()
    },
    async Update (id) {
      this.dialogVisible = true
      this.b = { ...id }
      this.lzyId = id.id
    },
    async IsDefault (id) {
      await queryIsDefault(id)
      this.Consignee()
    }
  }
}
</script>

<style lang="scss" scoped>
.shdz {
  background-color: #fff;
  padding: 15px 20px 20px 20px;
  border: 1px solid #e6e9ef;
  .shdz-y {
    font-size: 14px;
    font-weight: 800;
    border-bottom: 1px solid #e6e9ef;
    .skung {
      position: relative;
      height: 28px;
      line-height: 28px;
      display: block;
      width: 100px;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid #f74a4a;
    }
  }
  .lszq {
    line-height: 26px;
    overflow: hidden;
    display: block;
    font-size: 14px;
    margin-top: 15px;
    display: flex;
    .kilo {
      display: block;
      background: none;
      border: 1px solid #71b247;
      color: #333;
      width: 92px;
      height: 27px;
      text-align: center;
      line-height: 2px;
      font-weight: bold;
      background: #f0f8e9;
      text-decoration: none;
    }
    .kilo:hover {
      background-color: #71b247;
      color: #fff;
    }
    .klok {
      margin-left: 10px;
      margin-top: 3px;
      .slka {
        color: #71b247;
      }
    }
  }
  .el-dialog {
    width: 500px;
  }
  .poiu {
    width: 500px;
    .mnkul {
      width: 500px;
      height: 100%;
      // margin-bottom: 10px;
      .lbl {
        width: 120px;
        text-align: right;
        padding-right: 10px;
        font-size: 15px;
        margin-top: 10px;
        .fl {
          font-size: 0%;
          line-height: 1.5;
        }
      }
      .c {
        height: 30px;
      }
    }
  }
  .comm_bd {
    width: 910px;
    margin-top: 20px;
    border: 1px solid #e6e9ef;
    .com-addrtit {
      width: 870px;
      height: 300px;
      padding-top: 10px;
      margin: 0 auto;
      .clearfix {
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #e6e9ef;
      }
      .choose_box {
        width: 825px;
        margin: 0 auto;
        padding-top: 20px;
        .mb5 {
          display: flex;
          line-height: 30px;
          p {
            width: 100px;
          }
        }
        .clearfix1 {
          line-height: 30px;
          display: flex;
          justify-content: end;
          button {
            color: #1994eb;
            background-color: #fff;
            border: 0;
            margin: 0 10px;
          }
        }
      }
    }
  }
}
</style>
